<template>
  <div>
    <button @click="comp = 'Count'">切换组件到Count</button>
    <button @click="comp = 'Movie'">切换组件到Movie</button>
    <keep-alive>
      <!-- 动态组件 -->
      <component :is="comp" />
    </keep-alive>
  </div>
</template>

<script>
/* 
  1.Vue 允许你以一个函数的方式定义你的组件
*/
const Count = () => {
  /* 
    首先import放在函数中,只有当前被引入的组件被渲染的时候,这个函数才会调用,这里才会去引入Count组件
    webpack已经配置好了分开打包的功能,webpack在打包的时候,只要遇到import()就会把import方法引入的文件单独打包成一个文件
  */
  //必须要把import的结果返回出去，这样在等待异步组件的引入的时候才能知道当前的组件引入完成，才能去渲染
  return import("./components/Count.vue");
};
const Movie = () => {
  return import("./components/Movie.vue");
};
export default {
  name: "App",
  components: {
    /* 
      2.Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
    */
    Count,
    Movie,
  },
  data() {
    return {
      comp: "",
    };
  },
};
</script>

<style></style>
